<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom :isGrade="true" :isSearchBtn="true" @change="gradeChange" />
		<tab-filter id="filter" @tabChange="tabChange" />
		<get-column code="IMG0015" />
		<view v-for="(item, index) in dataList.list" :key="index">
		  <datum-pic v-if="activeTab == 1" :innerData="item" layoutType="0" />
		  <topic-pic v-else :innerData="item" layoutType="0" />
		</view>
		<u-loadmore height="88rpx" fontSize="24rpx" color="#999" :status="dataList.loading" />
		<BottomTabbar type="bks" active="datum" />
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import tabFilter from '@/pagesBKS/components/tab-filter.vue';
	import getColumn from '@/pagesBKS/components/get-column.vue';
	import BottomTabbar from '@/components/bottom-btn/bottom-tabbar.vue'
	import topicPic from './components/topic-pic.vue';
	import datumPic from './components/datum-pic.vue';
	import {datumList, topicList} from '@/api/bks.datum.js';
	export default {
		components: {
			headerCustom,
			tabFilter,
			topicPic,
			datumPic,
			getColumn,
			BottomTabbar
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				activeTab: 0,
				dataList: {
				  list: [],
				  page: 1,
				  size: 20,
				  count: 0,
				  loading: 'none'
				},
				scrollTop: 0,
				filters: {
				  classifyId: '',
				  materialsTagId: '',
				  grade: ''
				},
			}
		},
		onLoad(option) {
			this.init()
			this.getDataList()
		},
		methods: {
		  tabChange(e) {
			const { activeTab, classifyId, materialsTagId } = e
			console.log(activeTab)
			this.activeTab = activeTab
			this.filters.classifyId = classifyId
			this.filters.materialsTagId = materialsTagId
			this.init()
			this.getDataList()
		  },
		  // 设置年级
		  gradeChange(e) {
			this.filters.grade = e.gradeId
			this.init()
			this.getDataList()
		  },
		  // 数据初始化
		  init() {
			this.dataList = {
				list: [],
				page: 1,
				size: 10,
				total: 0,
				loading: 'none'
			  }
		  },
		  // 获取列表数据
		  getDataList() {
			if (this.dataList.loading == 'not') {
			  return
			}
			this.dataList.loading = 'loading'
			const {filters, activeTab, dataList: { list, page, size } } = this
			const parant = {
			  ...filters,
			  page,
			  size,
			  specialSubjectName: ''
			}
			const fun = activeTab == 1 ?  datumList : topicList
			fun(parant).then(res => {
				this.dataList.list = this.dataList.list.concat(res.data.list)
				const {total, page, size} = res.data.pageInfoVO
				if (total == 0) {
					this.dataList.loading = 'list-not'
				} else if (total < size || page * size >= total) {
					this.dataList.loading = 'nomore'
				}
				this.dataList.count = total
			})
		  },
		},
		onReachBottom() {
			const {
				page,
				size,
				count,
				loading
			} = this.dataList
			if (loading == 'nomore') {
				return
			}
			if (page * size < count) {
				this.dataList.page = page + 1
				this.getDataList()
			} else {
				this.dataList.loading = 'nomore'
			}
		},
	}
</script>

<style lang="scss" scoped>
	/**index.wxss**/
	.header {
	  padding: 24rpx 30rpx;
	}
	
	.item .user-box {
	  padding: 0 30rpx;
	}
	
	.item .user-box .left image {
	  width: 68rpx;
	  height: 68rpx;
	  border-radius: 50%;
	  margin-right: 19rpx;
	}
	
	.item .user-box .right .vipPrice {
	  margin-right: 7rpx;
	}
	
	.item .user-box .right .price {
	  text-decoration: line-through;
	}
	
	.item .title {
	  padding: 0 30rpx;
	  margin: 30rpx 0 19rpx;
	}
	
	.item .pic {
	  width: 100%;
	  height: 340rpx;
	  padding: 30rpx 0 0;
	  background-repeat: no-repeat;
	  background-position: center center;
	  background-size: 100% 100%;
	}
	
	.item .pic .bg {
	  width: 223rpx;
	  height: 64rpx;
	  line-height: 64rpx;
	  background: #6871FE;
	  border-radius: 0px 32rpx 32rpx 0px;
	  text-align: center;
	}
</style>